<template>
  <el-container class="main_con" >
    <div class="edit_con">
      <div class="edit_title">{{pageName}}</div>
      <div class="edit_content">
        <el-form size="medium" ref="smsForm" :model="obj" :rules="itemRules" label-width="150px" class="edit_form" style="width:600px">
          <el-form-item prop="name" label="支付名称">
            <el-input placeholder="请输入支付名称" v-model="obj.name"></el-input>
          </el-form-item>

          <el-form-item label="支付方式">
            <el-radio-group v-model="obj.mode" @change="changeMode">
              <el-radio :label="1">微信支付</el-radio>
              <!-- <el-radio :label="2">支付宝支付</el-radio> -->
               <el-radio :label="3">新微信支付</el-radio>
            </el-radio-group>
            <div style="color: #909399; font-size: 12px">
            仅接入了交易组件、小程序支付管理服务的小程序需要使用新微信支付</div>

          </el-form-item>

          <el-form-item label="支付类型">
            <el-select size="medium" v-model="obj.type" placeholder="请选择支付类型" style="width:250px">
              <el-option
                v-for="(item,i) in type"
                :key="i"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>



          <!-- mode=1,type=1 -->
          <span v-if="obj.mode == 1 && obj.type == 1">
            <el-form-item label="微信小程序/公众号AppId">
              <el-input v-model="configuration.m1t1.AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="商户id">
              <el-input v-model="configuration.m1t1.MchId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="APIKEY">
              <el-input v-model="configuration.m1t1.APIKEY" placeholder=""></el-input>
            </el-form-item>
          </span>
          <!-- mode=1,type=1 -->

          <!-- mode=1,type=2 -->
          <span v-if="obj.mode == 1 && obj.type == 2">
            <el-form-item label="子商户公众号AppId">
              <el-input v-model="configuration.m1t2.M_AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="子商户商户id">
              <el-input v-model="configuration.m1t2.M_MchId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="子商户APIKEY">
              <el-input v-model="configuration.m1t2.M_APIKEY" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="子商户CERT证书文件" >
            <!-- <el-input ref="cert" type="file"></el-input> -->
            <div><input ref="M_cert" type="file"/></div>
            <div class="fileTips">
            <span :class="obj.M_cert ? 'success' : 'fail'">{{obj.M_cert ? '已上传' : '未上传'}}</span>下载证书 cert.zip 中的 apiclient_cert.pem 文件
            </div>
            </el-form-item>

          <el-form-item label="子商户KEY密钥文件" >
            <!-- <el-input ref="wxkey" type="file"></el-input> -->
            <div><input ref="M_wxkey" type="file"/></div>
            <div class="fileTips">
              <span :class="obj.M_wxkey ? 'success' : 'fail'">{{obj.M_wxkey ? '已上传' : '未上传'}}</span>下载证书 cert.zip 中的 apiclient_key.pem 文件
            </div>
          </el-form-item>


            <el-form-item label="服务商公众号AppId">
              <el-input v-model="configuration.m1t2.AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="服务商商户id">
              <el-input v-model="configuration.m1t2.MchId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="服务商APIKEY">
              <el-input v-model="configuration.m1t2.APIKEY" placeholder=""></el-input>
            </el-form-item>
          </span>
          <!-- mode=1,type=2 -->

          <!-- mode=1,type=3 -->
          <span v-if="obj.mode == 1 && obj.type == 3">
            <el-form-item label="公众号AppId">
              <el-input v-model="configuration.m1t3.AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="公众号AppSecret">
              <el-input v-model="configuration.m1t3.AppSecret" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="商户id">
              <el-input v-model="configuration.m1t3.MchId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="APIKEY">
              <el-input v-model="configuration.m1t3.APIKEY" placeholder=""></el-input>
            </el-form-item>
          </span>
          <!-- mode=1,type=3 -->

          <!-- mode=1,type=4 -->
          <span v-if="obj.mode == 1 && obj.type == 4">
            <el-form-item label="服务商公众号AppId">
              <el-input v-model="configuration.m1t4.M_AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="服务商商户id">
              <el-input v-model="configuration.m1t4.M_MchId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="公众号AppId">
              <el-input v-model="configuration.m1t4.AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="公众号AppSecret">
              <el-input v-model="configuration.m1t4.AppSecret" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="商户id">
              <el-input v-model="configuration.m1t4.MchId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="APIKEY">
              <el-input v-model="configuration.m1t4.APIKEY" placeholder=""></el-input>
            </el-form-item>
          </span>
          <!-- mode=1,type=4 -->

          <!-- mode=2,type=1 -->
          <span v-if="obj.mode == 2 && obj.type == 1">
            <el-form-item label="验签方式:RSA">
              <el-radio-group v-model="configuration.m2t1.check">
                <el-radio :label="'RSA'">RSA</el-radio>
                <el-radio :label="'RSA2'">RSA2</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="支付宝AppId">
              <el-input v-model="configuration.m2t1.AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="支付宝公钥">
              <el-input v-model="configuration.m2t1.public" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="支付宝私钥">
              <el-input v-model="configuration.m2t1.private" placeholder=""></el-input>
            </el-form-item>
          </span>
          <!-- mode=2,type=1 -->

          <!-- mode=3,type=1 -->
          <span v-if="obj.mode == 3 && obj.type == 1">
            <el-form-item label="微信小程序/公众号AppId">
              <el-input v-model="configuration.m3t1.AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="商户id">
              <el-input v-model="configuration.m3t1.MchId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="APIKEY">
              <el-input v-model="configuration.m3t1.APIKEY" placeholder=""></el-input>
            </el-form-item>
          </span>
          <!-- mode=3,type=1 -->

          <!-- mode=3,type=2 -->
          <span v-if="obj.mode == 3 && obj.type == 2">
            <el-form-item label="子商户公众号AppId">
              <el-input v-model="configuration.m3t2.M_AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="子商户商户id">
              <el-input v-model="configuration.m3t2.M_MchId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="子商户APIKEY">
              <el-input v-model="configuration.m3t2.M_APIKEY" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="子商户CERT证书文件" >
            <!-- <el-input ref="cert" type="file"></el-input> -->
            <div><input ref="M_cert" type="file"/></div>
            <div class="fileTips">
            <span :class="obj.M_cert ? 'success' : 'fail'">{{obj.M_cert ? '已上传' : '未上传'}}</span>下载证书 cert.zip 中的 apiclient_cert.pem 文件
            </div>
            </el-form-item>

          <el-form-item label="子商户KEY密钥文件" >
            <!-- <el-input ref="wxkey" type="file"></el-input> -->
            <div><input ref="M_wxkey" type="file"/></div>
            <div class="fileTips">
              <span :class="obj.M_wxkey ? 'success' : 'fail'">{{obj.M_wxkey ? '已上传' : '未上传'}}</span>下载证书 cert.zip 中的 apiclient_key.pem 文件
            </div>
          </el-form-item>


            <el-form-item label="服务商公众号AppId">
              <el-input v-model="configuration.m3t2.AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="服务商商户id">
              <el-input v-model="configuration.m3t2.MchId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="服务商APIKEY">
              <el-input v-model="configuration.m3t2.APIKEY" placeholder=""></el-input>
            </el-form-item>
          </span>
          <!-- mode=3,type=2 -->

          <!-- mode=3,type=3 -->
          <span v-if="obj.mode == 3 && obj.type == 3">
            <el-form-item label="公众号AppId">
              <el-input v-model="configuration.m3t3.AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="公众号AppSecret">
              <el-input v-model="configuration.m3t3.AppSecret" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="商户id">
              <el-input v-model="configuration.m3t3.MchId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="APIKEY">
              <el-input v-model="configuration.m3t3.APIKEY" placeholder=""></el-input>
            </el-form-item>
          </span>
          <!-- mode=3,type=3 -->

          <!-- mode=3,type=4 -->
          <span v-if="obj.mode == 3 && obj.type == 4">
            <el-form-item label="服务商公众号AppId">
              <el-input v-model="configuration.m3t4.M_AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="服务商商户id">
              <el-input v-model="configuration.m3t4.M_MchId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="公众号AppId">
              <el-input v-model="configuration.m3t4.AppId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="公众号AppSecret">
              <el-input v-model="configuration.m3t4.AppSecret" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="商户id">
              <el-input v-model="configuration.m3t4.MchId" placeholder=""></el-input>
            </el-form-item>

            <el-form-item label="APIKEY">
              <el-input v-model="configuration.m3t4.APIKEY" placeholder=""></el-input>
            </el-form-item>
          </span>
          <!-- mode=3,type=4 -->

          <el-form-item :label="obj.type==1?'CERT证书文件':'服务商CERT证书文件'" v-show="obj.mode != 2">
            <!-- <el-input ref="cert" type="file"></el-input> -->
            <div><input ref="cert" type="file"/></div>
            <div class="fileTips">
              <span :class="obj.cert ? 'success' : 'fail'">{{obj.cert ? '已上传' : '未上传'}}</span>下载证书 cert.zip 中的 apiclient_cert.pem 文件
            </div>
          </el-form-item>

          <el-form-item :label="obj.type==1?'KEY密钥文件':'服务商KEY密钥文件'"  v-show="obj.mode != 2">
            <!-- <el-input ref="wxkey" type="file"></el-input> -->
            <div><input ref="wxkey" type="file"/></div>
            <div class="fileTips">
              <span :class="obj.wxkey ? 'success' : 'fail'">{{obj.wxkey ? '已上传' : '未上传'}}</span>下载证书 cert.zip 中的 apiclient_key.pem 文件
            </div>
          </el-form-item>

 <!--          <el-form-item label="ROOT文件" v-show="obj.mode != 2">
            <div><input ref="rootca" type="file"/></div>
            <div class="fileTips">
              <span :class="obj.rootca ? 'success' : 'fail'">{{obj.rootca ? '已上传' : '未上传'}}</span>下载证书 cert.zip 中的 rootca.pem 文件,新下载证书无需上传此文件
            </div>
          </el-form-item> -->

        </el-form>
      </div>

      <div class="edit_footer">
        <el-button size="medium" type="primary" @click="saveData">保存数据</el-button>
      </div>
    </div>
  </el-container>
</template>

<script>
import {
  addPay,
  editPay,
  getPay
} from '@/api/mall/pay';
export default {
  data(){
    return {
      pageIsEdit:0,//0->新增,1->编辑
      pageName:'新增支付模板',
      obj: {
        name:'',
        mode:1,
        type:1,
        cert:false,
        wxkey:false,
        rootca:false
      },
      _obj:{},
      configuration:{
        m1t1:{
          AppId:'',
          MchId:'',
          APIKEY:''
        },
        m1t2:{
          M_AppId:'',
          M_MchId:'',
          AppId:'',
          MchId:'',
          APIKEY:'',
          M_APIKEY:"",
          M_wxkey:false,
          M_cert:false
        },
        m1t3:{
          AppId:'',
          AppSecret:'',
          MchId:'',
          APIKEY:''
        },
        m1t4:{
          M_AppId:'',
          M_MchId:'',
          AppId:'',
          AppSecret:'',
          MchId:'',
          APIKEY:''
        },
        m2t1:{
          check:'RSA',
          AppId:'',
          publicKey:'',
          privateKey:''
        },
        m3t1:{
          AppId:'',
          MchId:'',
          APIKEY:''
        },
        m3t2:{
          M_AppId:'',
          M_MchId:'',
          AppId:'',
          MchId:'',
          APIKEY:'',
          M_APIKEY:"",
          M_wxkey:false,
          M_cert:false
        },
        m3t3:{
          AppId:'',
          AppSecret:'',
          MchId:'',
          APIKEY:''
        },
        m3t4:{
          M_AppId:'',
          M_MchId:'',
          AppId:'',
          AppSecret:'',
          MchId:'',
          APIKEY:''
        },
      },
      type:[],
      typeArray:[
        [{
          value:1,
          label:'微信支付'
        },{
          value:2,
          label:'微信支付子商户'
        },
        // {
        //   value:3,
        //   label:'借用微信支付'
        // },{
        //   value:4,
        //   label:'借用微信支付子商户'
        // },

        ],
        [{
          value:1,
          label:'支付宝2.0'
        }],
        [{
          value:1,
          label:'微信支付'
        },{
          value:2,
          label:'微信支付子商户'
        },
        // {
        //   value:3,
        //   label:'借用微信支付'
        // },{
        //   value:4,
        //   label:'借用微信支付子商户'
        // },
        
        ],
      ],
      isLoading: false,
      itemRules: {
        name: [{
          required: true,
          trigger: 'blur',
          message: '请输入支付模板名称'
        }]
      }
    }
  },
  components: {},
  created(){
    //获取路由参数(编辑时使用)
    if(this.$route.query.id){
      //编辑页面
      this.pageIsEdit = 1;
      this.pageName = '编辑支付模板';
      this.getPay(this.$route.query.id);
    }else{
      this.pageIsEdit = 0;
      this.pageName = '新增支付模板';
      //设置初始支付类型
      this.type = this.typeArray[0];
      //console.log(this.type)
    };
  },
  mounted(){
    // this.getScene();
  },
  methods: {
    //获取支付模板数据
    getPay(id){
      this.isLoading = true;
      getPay(id).then(res => {
        this.isLoading = false;
        let o = res.msg;

        //覆盖默认数据
        this.type = this.typeArray[o.mode - 1];
        this.obj = o;
        this.configuration['m' + o.mode + 't' + o.type] = o.configuration;
      });
    },
    //切换支付方式
    changeMode(item){
      switch(item){
        case 1:
          this.type = this.typeArray[0];
          break;
        case 2:
          this.type = this.typeArray[1];
          break;
        default:
          break;
      };
      this.obj.type = 1;
    },
    //保存数据
    saveData(){
      // console.log(this.obj)
      // console.log(this.configuration)
      // return false;
      this.$refs.smsForm.validate(valid => {
        if (valid) {
          if(this.obj.mode != 2){
            //微信支付需要上传cert与wxkey证书
            if(!this.obj.cert){
              if(this.$refs.cert.files.length == 0){
                this.$alert('微信支付方式,必须上传cert证书');
                return false;
              }
            };

            if(!this.obj.wxkey){
              if(this.$refs.wxkey.files.length == 0){
                this.$alert('微信支付方式,必须上传wxkey证书');
                return false;
              }
            };


          };

          let _data = new FormData();
          _data.append('name',this.obj.name);
          _data.append('mode',this.obj.mode);
          _data.append('type',this.obj.type);

          switch(this.obj.mode){
            case 1:
              //微信
              switch(this.obj.type){
                case 1:
                  //微信支付
                  _data.append('configuration[AppId]',this.configuration.m1t1.AppId);
                  _data.append('configuration[MchId]',this.configuration.m1t1.MchId);
                  _data.append('configuration[APIKEY]',this.configuration.m1t1.APIKEY);
                  break;
                case 2:
                  //微信支付子商户
                  _data.append('configuration[M_AppId]',this.configuration.m1t2.M_AppId);
                  _data.append('configuration[M_MchId]',this.configuration.m1t2.M_MchId);
                  _data.append('configuration[AppId]',this.configuration.m1t2.AppId);
                  _data.append('configuration[MchId]',this.configuration.m1t2.MchId);
                  _data.append('configuration[APIKEY]',this.configuration.m1t2.APIKEY);
                  _data.append('configuration[M_APIKEY]',this.configuration.m1t2.M_APIKEY);
                  if(Boolean(this.pageIsEdit)){
                    if(this.$refs.M_cert.files.length > 0){
                      _data.append('M_cert',this.$refs.M_cert.files[0]);
                    };

                    if(this.$refs.M_wxkey.files.length > 0){
                      _data.append('M_wxkey',this.$refs.M_wxkey.files[0]);
                    };
                  }else{
                    _data.append('M_cert',this.$refs.M_cert.files[0]);
                    _data.append('M_wxkey',this.$refs.M_wxkey.files[0]);
                  };

                  break;
                case 3:
                  //借用微信支付
                  _data.append('configuration[AppId]',this.configuration.m1t3.AppId);
                  _data.append('configuration[AppSecret]',this.configuration.m1t3.AppSecret);
                  _data.append('configuration[MchId]',this.configuration.m1t3.MchId);
                  _data.append('configuration[APIKEY]',this.configuration.m1t3.APIKEY);
                  break;
                case 4:
                  //借用微信子商户
                  _data.append('configuration[M_AppId]',this.configuration.m1t4.M_AppId);
                  _data.append('configuration[M_MchId]',this.configuration.m1t4.M_MchId);
                  _data.append('configuration[AppId]',this.configuration.m1t4.AppId);
                  _data.append('configuration[AppSecret]',this.configuration.m1t4.AppSecret);
                  _data.append('configuration[MchId]',this.configuration.m1t4.MchId);
                  _data.append('configuration[APIKEY]',this.configuration.m1t4.APIKEY);
                  break;
                default:
                  break;
              };
              break;
            case 2:
              //支付宝,type只有1一种情况
              _data.append('configuration[check]',this.configuration.m2t1.check);
              _data.append('configuration[AppId]',this.configuration.m2t1.AppId);
              _data.append('configuration[public]',this.configuration.m2t1.public);
              _data.append('configuration[private]',this.configuration.m2t1.private);
              break;
              case 3:
                //微信
                switch(this.obj.type){
                  case 1:
                    //微信支付
                    _data.append('configuration[AppId]',this.configuration.m3t1.AppId);
                    _data.append('configuration[MchId]',this.configuration.m3t1.MchId);
                    _data.append('configuration[APIKEY]',this.configuration.m3t1.APIKEY);
                    break;
                  case 2:
                    //微信支付子商户
                    _data.append('configuration[M_AppId]',this.configuration.m3t2.M_AppId);
                    _data.append('configuration[M_MchId]',this.configuration.m3t2.M_MchId);
                    _data.append('configuration[AppId]',this.configuration.m3t2.AppId);
                    _data.append('configuration[MchId]',this.configuration.m3t2.MchId);
                    _data.append('configuration[APIKEY]',this.configuration.m3t2.APIKEY);
                    _data.append('configuration[M_APIKEY]',this.configuration.m3t2.M_APIKEY);
                    if(Boolean(this.pageIsEdit)){
                      if(this.$refs.M_cert.files.length > 0){
                        _data.append('M_cert',this.$refs.M_cert.files[0]);
                      };

                      if(this.$refs.M_wxkey.files.length > 0){
                        _data.append('M_wxkey',this.$refs.M_wxkey.files[0]);
                      };
                    }else{
                      _data.append('M_cert',this.$refs.M_cert.files[0]);
                      _data.append('M_wxkey',this.$refs.M_wxkey.files[0]);
                    };

                    break;
                  case 3:
                    //借用微信支付
                    _data.append('configuration[AppId]',this.configuration.m3t3.AppId);
                    _data.append('configuration[AppSecret]',this.configuration.m3t3.AppSecret);
                    _data.append('configuration[MchId]',this.configuration.m3t3.MchId);
                    _data.append('configuration[APIKEY]',this.configuration.m3t3.APIKEY);
                    break;
                  case 4:
                    //借用微信子商户
                    _data.append('configuration[M_AppId]',this.configuration.m3t4.M_AppId);
                    _data.append('configuration[M_MchId]',this.configuration.m3t4.M_MchId);
                    _data.append('configuration[AppId]',this.configuration.m3t4.AppId);
                    _data.append('configuration[AppSecret]',this.configuration.m3t4.AppSecret);
                    _data.append('configuration[MchId]',this.configuration.m3t4.MchId);
                    _data.append('configuration[APIKEY]',this.configuration.m3t4.APIKEY);
                    break;
                  default:
                    break;
                };
                break;
            default:
              break;
          };
          //证书文件
          if(this.obj.mode != 2){
            if(Boolean(this.pageIsEdit)){
              if(this.$refs.cert.files.length > 0){
                _data.append('cert',this.$refs.cert.files[0]);
              };

              if(this.$refs.wxkey.files.length > 0){
                _data.append('wxkey',this.$refs.wxkey.files[0]);
              };
            }else{
              _data.append('cert',this.$refs.cert.files[0]);
              _data.append('wxkey',this.$refs.wxkey.files[0]);
            };

          };

          // if(this.$refs.rootca.files.length > 0){
          //   _data.append('rootca',this.$refs.rootca.files[0]);
          // };

          //提交数据
          this.isLoading = true;
          if(Boolean(this.pageIsEdit)){
            //编辑
            editPay(_data,this.obj.id).then(res => {
              this.isLoading = false;
              //this.$router.push({path:'/pay/list'});
              this.$router.push({path:'/finance/pay/payTemplate'});
            });
          }else{
            //新增
            addPay(_data).then(res => {
              this.isLoading = false;
              //this.$router.push({path:'/pay/list'});
              this.$router.push({path:'/finance/pay/payTemplate'});
            });
          }

        };
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.fileTips{
  font-size: 12px;
  color: #909399;
  height: 14px;
  line-height: 14px;

  .success{
    color: #67C23A;
  }

  .fail{
    color: #F56C6C;
  }
}
</style>
